<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="radio" v-model="mySex" value="male"> 男
        <input type="radio" v-model="mySex" value="female"> 女
        <input type="radio" v-model='mySex' value='123' > 全选
        <br>
        ----------------------------------
        <p v-for='item in shuaix' :key='item.id' id="p1">姓名：{{item.name}},性别：{{item.sex}}</p>
        
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const ve = new Vue({
            el:'#app',
            data:{
            mySex:'male',
            students:[
             {
            id:1,
            name:'jack',
            sex:'male'
             },
            {
            id:2,
            name:'rose',
            sex:'female'
            },
            {
            id:3,
            name:'lily',
            sex:'female'
            },
            {
            id:4,
            name:'hanmeimei',
            sex:'female'
            },
            {
            id:5,
            name:'lilei',
            sex:'male'
            }
            ]
            },
        computed:{
            shuaix(){
               if(this.mySex === 'male') {
                   return this.students.filter( item => item.sex==='male')
               } else if (this.mySex === 'female') {
                   return this.students.filter( item => item.sex==='female')
               } else {
                return this.students.filter( item => item.sex == 'female' || 'male')
               }
            }
        }
        })
    </script>
</body>
</html>